<template>
    <div class="personalnteract">
        <div class="header">
            <div class="header-left">
                互动消息
            </div>
        </div>
        <div class="Interact-content"  ref="wrapper">
            <div>
                <div class="interact-item">
                    <div class="item-left">
                        <div class="item-left__imgBox">
                            <img class="item-left__img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-right">
                        <div class="item-right__mainContent border-bottom">
                            <div class="item-right__hd">
                                <span class="item-right__username">啦啦啦</span>
                                <span class="item-right__replytime">时间:2018.08.28</span>
                            </div>
                            <div class="item-right__bd">
                                <div class="item-right__content">
                                    <div class="item-right__contentText">活动好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩</div>
                                    <p class="item-right__actName">活动: 2018啦啦啦啦</p>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>
                <div class="interact-item">
                    <div class="item-left">
                        <div class="item-left__imgBox">
                            <img class="item-left__img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-right">
                        <div class="item-right__mainContent border-bottom">
                            <div class="item-right__hd">
                                <span class="item-right__username">啦啦啦</span>
                                <span class="item-right__replytime">时间:2018.08.28</span>
                            </div>
                            <div class="item-right__bd">
                                <div class="item-right__content">
                                    <div class="item-right__contentText">活动好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩</div>
                                    <p class="item-right__actName">活动: 2018</p>
                                    <div class="item-right__contentImg">
                                        <flexbox>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                        </flexbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                </div>
                <div class="interact-item">
                    <div class="item-left">
                        <div class="item-left__imgBox">
                            <img class="item-left__img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-right">
                        <div class="item-right__mainContent border-bottom">
                            <div class="item-right__hd">
                                <span class="item-right__username">啦啦啦</span>
                                <span class="item-right__replytime">时间:2018.08.28</span>
                            </div>
                            <div class="item-right__bd">
                                <div class="item-right__content">
                                    <div class="item-right__contentText">活动好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩</div>
                                    <p class="item-right__actName">活动: 2018</p>
                                    <div class="item-right__contentImg">
                                        <flexbox>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                        </flexbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                </div>
                <div class="interact-item">
                    <div class="item-left">
                        <div class="item-left__imgBox">
                            <img class="item-left__img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-right">
                        <div class="item-right__mainContent border-bottom">
                            <div class="item-right__hd">
                                <span class="item-right__username">啦啦啦</span>
                                <span class="item-right__replytime">时间:2018.08.28</span>
                            </div>
                            <div class="item-right__bd">
                                <div class="item-right__content">
                                    <div class="item-right__contentText">活动好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩</div>
                                    <p class="item-right__actName">活动: 2018</p>
                                    <div class="item-right__contentImg">
                                        <flexbox>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                        </flexbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                </div>
                <div class="interact-item">
                    <div class="item-left">
                        <div class="item-left__imgBox">
                            <img class="item-left__img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-right">
                        <div class="item-right__mainContent border-bottom">
                            <div class="item-right__hd">
                                <span class="item-right__username">啦啦啦</span>
                                <span class="item-right__replytime">时间:2018.08.28</span>
                            </div>
                            <div class="item-right__bd">
                                <div class="item-right__content">
                                    <div class="item-right__contentText">活动好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩好玩</div>
                                    <p class="item-right__actName">活动: 2018</p>
                                    <div class="item-right__contentImg">
                                        <flexbox>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                            <flexbox-item><figure class="item-right__contentFigure" style="background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg)"></figure></flexbox-item>
                                        </flexbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
import BScroll from 'better-scroll'
export default {
    name: 'personalnteract',
    props: {
        sign: String
    },
    components: {
        Flexbox,
        FlexboxItem
    },
    mounted () {
        this.scroll = new BScroll(this.$refs.wrapper)
    }
}
</script>

<style lang="stylus" scoped>
.personalnteract
    background-color: #fff
    margin-bottom: 1rem
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .25rem
        border-bottom: 1px solid #ececec
        box-sizing:border-box
        box-shadow: 0 0 3px rgba(238,238,238,0.1)
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: #ed722e
                margin-right: .20rem
                margin-top: .25rem
    .signInfo
        padding: .2rem
        line-height: .35rem
        font-size: .3rem
    .Interact-content
        height: 9rem
        padding: .1rem .3rem
        overflow: hidden
        .interact-item
            margin-top: .4rem
            overflow: hidden
            display: flex
            .item-left   
                width: .6rem
                margin-right: .2rem
                .item-left__imgBox
                    margin: 0 auto
                    width: .6rem
                    height: .6rem
                    border-radius: 50%
                    overflow: hidden
                    .item-left__img
                        width: 100%
                        height: 100%
            .item-right
                flex: 1
                .item-right__mainContent
                    padding-bottom: .2rem
                    .item-right__hd
                        position: relative
                        .item-right__username
                            font-size: .30rem
                            color: #666666
                        .item-right__replytime
                            font-size: .24rem
                            color: #ccc
                            position: absolute
                            bottom: 0
                            right: 0
                    .item-right__bd
                        margin-top: .16rem
                        .item-right__contentText
                            font-size: .32rem
                            line-height: .4rem
                            margin-bottom: .15rem
                        .item-right__actName
                            font-size: .20rem
                            color: #ccc
                        .item-right__contentImg
                            width: 4.94rem
                            margin-top: .3rem
                            .item-right__contentFigure
                                position: relative
                                width: 100%
                                height: 0
                                overflow: hidden
                                margin: 0
                                padding-bottom: 100%
                                background-position: center
                                background-repeat: no-repeat
                                background-size: cover
                .item-right__replyContent
                    padding: 0 .2rem
                    box-sizing: border-box
                    .item-right__reply
                        margin-top: .2rem
                        .item-right__replyTitle
                            font-size: .30rem
                            color: #666666
                            margin-bottom: .15rem
                        .item-right__replyCont
                            font-size: .32rem
                            line-height: .4rem
                            margin-bottom: .15rem
                        .item-right__replyTime
                            font-size: .24rem
                            color: #ccc
                .border-bottom
                    border-bottom: 1px solid #eee
</style>
